<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <base href="<%=basePath%><%!private Object basePath;%>">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>增加图书</title>
    <meta name="description" content="这是一个 增加图书 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="back/assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="back/assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="back/assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="back/assets/css/admin.css">
    <link rel="stylesheet" href="back/assets/css/app.css">
</head>

<body data-type="generalComponents">
<div>
    <div>
        <ol class="am-breadcrumb">
            <li><a href="back/right.jsp" class="am-icon-home">首页</a></li>
            <li class="am-active">增加图书</li>
        </ol>
        <div class="tpl-portlet-components">
            <div class="portlet-title">
                <div class="caption font-green bold">
                    增加图书
                </div>
            </div>
            <div class="tpl-block ">
                <div class="am-g tpl-amazeui-form">
                    <div class="am-u-sm-12 am-u-md-9">
                        <form class="am-form am-form-horizontal" action="/books/add.action">
                            <div class="am-form-group">
                                <label for="book-bname" class="am-u-sm-3 am-form-label" name="email">图书名</label>
                                <div class="am-u-sm-9">
                                    <input type="text" id="book-bname"  name="bname">
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label  class="am-u-sm-3 am-form-label">类别</label>
                                <div class="am-u-sm-9" >
                                    <select data-am-selected="{searchBox: 1}" name="categoryid.id" id="sel" ></select>
                                </div>
                            </div>


                            <div class="am-form-group">
                                <label for="book-price" class="am-u-sm-3 am-form-label">价格</label>
                                <div class="am-u-sm-9">
                                    <input type="text" id="book-price"  name="price" >
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label for="book-inventory" class="am-u-sm-3 am-form-label">库存</label>
                                <div class="am-u-sm-9">
                                    <input type="text" id="book-inventory"  name="writer" >
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label for="book-writer" class="am-u-sm-3 am-form-label">作者</label>
                                <div class="am-u-sm-9">
                                    <input type="text" id="book-writer"  name="writer" >
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label for="book-publisher" class="am-u-sm-3 am-form-label">出版社</label>
                                <div class="am-u-sm-9">
                                    <input type="text" id="book-publisher"  name="publisher" >
                                </div>
                            </div>

                            <%--<div class="am-form-group">--%>
                                <%--<label class="am-u-sm-3 am-form-label">出版时间</label>--%>
                                <%--<div class="am-u-sm-9">--%>
                                      <%--&lt;%&ndash;<fmt:formatDate  value="${books.pub_date}" pattern="yyyy-MM-dd"/>&ndash;%&gt;--%>
                                   <%--<input type="text" id="book-pub_date"  name="pubDate">--%>
                                <%--</div>--%>
                            <%--</div>--%>

                            <div class="am-form-group">
                                <label for="book-description" class="am-u-sm-3 am-form-label">图书介绍</label>
                                <div class="am-u-sm-9">
                                    <textarea id="book-description" rows="3"  name="description"></textarea>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label for="book-description" class="am-u-sm-3 am-form-label">上传图书图片</label>
                                <div class="am-u-sm-9">
                                    <p class="uploadimg">
                                        <input type ="file" class="bookImg"  onchange="upload()"><span>X</span>
                                    </p>
                                    <input type="button" value="增加图书图片" id="imgbut">
                                </div>
                            </div>

                            <div class="am-form-group">
                                <div class="am-u-sm-9 am-u-sm-push-3">
                                    <button type="submit" class="am-btn am-btn-primary">保存修改</button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="back/assets/js/jquery.min.js"></script>
<script src="back/assets/js/amazeui.min.js"></script>
<script src="back/assets/js/app.js"></script>
<script src="back/assets/js/jquery-1.12.4.js"></script>
<script>
    $(function(){
        $.get("../booktype/list.action","",function(res){

            for(var i=0;i<res.length;i++){
                $("#sel").append("<option>"+res[i].typename+"</option>");
            }

        });

        $("#imgbut").click(function(){
            $(".uploadimg:last").after($(".uploadimg:last").clone());
            $(".uploadimg span").click(function(){
                $(this).parents("p").remove();
            })
        });
    });

    function upload() {
        var formData = new FormData();
        formData.append("file", $(".bookImg")[0].files[0]);
        $.ajax({
            type: 'POST',
            url: "/books/upload.action",
            data: formData,
            contentType: false,
            processData: false,//这个很有必要，不然不行
            dataType: "json",
            mimeType: "multipart/form-data",
            success: function (result) {
                if (result.code == 0) {
                    $.modal.closeAll();
                    $.modal.alertSuccess(result.msg);
                    // $('.file_url').val(result.url);
                } else {
                    layer.close(index);
                    $.modal.enable();
                    $.modal.alertError(result.msg);
                }
            }
        });
    }
</script>
</body>

</html>